<template>
  <div>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>说明</span>
        </div>
        <div className="text item">
          红色表示 距离更换维修时间很近, 需要立即维修
        </div>
        <div className="text item">
          黄色表示 距离更换维修时间比较近, 需要注意检修
        </div>
        <div className="text item">
          绿色表示 在安全使用期间内
        </div>
        <div className="text item">
          蓝色表示 设备是新安装的
        </div>
      </el-card>

      <el-card v-for="kpi in kpiData" :key="kpi.id" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ kpi.name }}</span>
          <el-button style="float: right; padding: 3px 0" type="text">
            {{ kpi.handle }}
          </el-button>
        </div>
        <el-progress
          :text-inside="true"
          :stroke-width="26"
          :percentage="kpi.percentage_used"
          :status="kpi.state"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import odoo from '@/odooapi'

// // id, percentage, status, name, handle
// const kpiData_list = [
//   [1, 45, '教学楼二层配电箱', '检查'],
//   [2, 82, '操场篮球架', '检查'],
//   [3, 66, '实验室仪器', '检查'],
//   [4, 55, '教学楼一层配电箱', '检查'],
//   [5, 33, '热水器', '检查'],
//   [6, 83, '厨房空调', '检查'],
//   [7, 50, '宿舍楼外瓷砖', '检查']
// ]

// const kpiData = kpiData_list.map(item => {
//   const [id, percentage, name, handle] = item

//   let status
//   if (percentage > 80) {
//     status = 'exception'
//   } else if (percentage > 60) {
//     status = 'warning'
//   } else if (percentage > 40) {
//     status = 'success'
//   } else {
//     status = undefined
//   }

//   return { id, percentage, status, name, handle }
// })

export default {
  name: 'Home',
  components: {},
  directives: {},
  filters: {},

  data() {
    return {
      kpiData: []
    }
  },
  computed: {},
  async created() {
    const model = odoo.env('edu.safety.point')
    // console.log('xxxx,', model)

    const res = await model.search()
    this.kpiData = res.map(item => {
      const item2 = { ...item }
      item2.handle = '检查'
      return item2
    })
    // console.log('xxxx,', res)
  }
}
</script>
